<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*P{
				margin: 0;
				padding: 0;
			}
			/*五角星*/
			#star-five{
				width: 0;
				height: 0;
				position: relative;
				top: 0px;
				left: 0;
				border-bottom: 70px solid red;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
				-webkit-transform: rotate(35deg);
				-moz-transform: rotate(35deg);
				-ms-transform: rotate(35deg);
				-o-transform: rotate(35deg);
				transform: rotate(35deg);
				margin: 70px 0;
			}
			#star-five:before{
				width: 0;
				height: 0;
				position: absolute;
				top: 0px;
				left: -100px;
				border-bottom: 70px solid red;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
				-webkit-transform: rotate(-70deg);
				-moz-transform: rotate(-70deg);
				-ms-transform: rotate(-70deg);
				-o-transform: rotate(-70deg);
				transform: rotate(-70deg);
				content: '';
			}
			#star-five:after{
				width: 0;
				height: 0;
				position: absolute;
				top: -51px;
				left: -66px;
				border-bottom: 70px solid red;
				border-left: 30px solid transparent;
				border-right: 30px solid transparent;
				-webkit-transform: rotate(-35deg);
				-moz-transform: rotate(-35deg);
				-ms-transform: rotate(-35deg);
				-o-transform: rotate(-35deg);
				transform: rotate(-35deg);
				content: '';
			}
			
	
		</style>
	</head>
	<body>
		<!--1.HTML5为什么只需要写 <!DOCTYPE HTML>？<!DOCTYPE html>中DOCTYPE 有什么作用, 去掉会有什么影响?-->

		<!--2.- 业务系统的app端的流程是什么?-->

		<!--3.- 编写一段代码, 播放视频, 要求循环播放, 视图宽度和浏览器同宽!-->

		<!--4.写一段代码生成一个五角星:=========================-->
		<div id="star-five"></div>
		<hr />
		<!--5.编写: 用js监听输入框中的文字, 在按确定键之后, 生成一个标签按键, 添加到页面上-->
		<div id="">
			请输入创建按键的名字:<input type="text" name="txt" id="txt" value="" />
			<button onclick="btn()">点击生成</button>
			<div id="middle"></div>
		</div>
		<hr />
		<!--6.写一个函数function changeIndex(a, b) , 根据输入的参数数字对换其对应对象在数组中的位置-->
		原数组：<div id="arr"></div>
		<div id="">
			请输入需要换位置的第一个数：<input type="text" name="num1" id="num1" value="" /><br />
			请输入需要换位置的第二个数：<input type="text" name="num2" id="num2" value="" /><br />
			<button onclick="changeIndex()">点击换位置</button><br />
		</div>
		替换后的数组：<div id="newarr"></div>
		<!--7.编程题: 写一个按键, 点击后 轮流显示”日周月”, 关闭后再打开能显示关闭前显示的状态-->
		<hr />
		<div class="showWrap">
			<div id="showDate">当前星期3</div>
			<button onclick="btnD()">点击切换显示</button>
		</div>
		<!--8. HTML行内元素有哪些, 块级元素有哪些?画出CSS盒模型-->
		<hr />
		<div id="">
			<p>块级元素会从新的一行出现，行内元素在一行并排显示；行级元素不能设置width与height;
			<br />块级元素有：h1~h6、ul 、li、ol 、dl 、dt、dd、p、div、form、等
			<br />行内元素有：a、span strong 等
			<br />特殊元素具有行和块的属性：img、input、table</p>
			<span id="">
				盒模型有两种：标准盒模型（w3c标准）和IE盒模型。<br />
				标准盒模型中width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸<br />
				但在IE6浏览器的width不是内容的宽度，而是内容、内边距和边框的宽度总和。<br />
			</span>
			<img src="img/167B3265-12EA-4358-BF2D-9EF8BDB9C66A.png"/>
			<img src="img/9CD1FDE7-BF45-43A9-B10D-BD1F520A4A9C.png"/>
			
		</div>
		<!--9.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?-->
		<hr />
		<a href="http://aimee-web.lofter.com/post/19c35e_6132d7">点击查看</a>
		<!--10. 清除浮动的几种方式, 各自的优缺点?-->
		<hr />
		<span id="">
			清除浮动的方法：区分以下哪些是最好的方案（1~5不可取）

			<br />1)在浮动元素下加子元素<div class="clear"></div>然后设置样式.clear{ height:0px;font-size:0;clear:both;}；
			<br />2)在浮动元素下面（与浮动元素同级）加<br clear="all"/>
			<br />3)给浮动元素的父级也加浮动(这种情况当父级margin:0 auto时不居中)
			<br />4)给父级加display:inline-block;(同方法2,不居中,只有IE6,7居中)
			<br />5)给浮动元素父级加overflow:auto;
			<br />6）经典用法
			<br />.clear,.clear-all{clear:both;font-size:0;height:0;line-height:0;overflow:hidden}
			<br />.fix:after,.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
			<br />.fix,.clearfix{*zoom:1} zoom:1;属性是IE浏览器的专有属性
		</span>
		<!--11. HTML5存储类型有哪些?-->
		<hr />
		<p>html 几种储存方法
			1.本地储存 localstorage;适用于长期存储数据，浏览器关闭后数据不丢失
			2.本地储存 sessionstorage;存储的数据在浏览器关闭后自动删除
			3.离线缓存 application cache;
			4. Web SQL;
			5.indexDB;
		</p>
		
		<!--12. HTTP状态吗有哪些, 分别代表什么意思?(几个常用的就行, 不用全说)-->
		<hr />
		<p>
			成功2××          成功处理了请求的状态码。 <br />
			200                   服务器已成功处理了请求并提供了请求的网页。 <br />
			204                   服务器成功处理了请求，但没有返回任何内容。    <br />     
			301                  请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎索引中保存新的URL。 <br />
			302                   请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。 <br />
			304                   如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可节省带宽和开销。 <br />
			400                    服务器不理解请求的语法。 <br />
			403                    服务器拒绝请求。 <br />
			404                    服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。 <br />
			服务器错误5××   表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。 <br />
			500                     服务器遇到错误，无法完成请求。 <br />
			503                     服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
		</p>
		
		
		<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//5
			var txt=document.getElementById("txt");
			var middle=document.getElementById("middle");
			function btn () {
				var but=document.createElement("button");
				but.innerHTML=txt.value;
				middle.appendChild(but);
				txt.value="";
			}
			//6
			var arr=[1,2,3,4,5,6,7,8,9,10];
			var arrdiv=document.getElementById("arr");
			var aa=document.getElementById("num1");
			var bb=document.getElementById("num2");
			var newarr=document.getElementById("newarr");
			arrdiv.innerHTML=arr;
			function changeIndex (a,b) {
				if (aa.value==""||bb.value=="") {
					alert("请输入两个数！！！");
				} else{
					if (arr.indexOf(parseInt(aa.value))==-1||arr.indexOf(parseInt(bb.value))==-1) {
						alert("输入数字错误！！！")
					} else{
						a=arr.indexOf(parseInt(aa.value));
						b=arr.indexOf(parseInt(bb.value));
					}
				}
				arr[a]=arr[a]+arr[b];
				arr[b]=arr[a]-arr[b];
				arr[a]=arr[a]-arr[b];
				newarr.innerHTML=arr;
			}
			//7
			var showDate=document.getElementById("showDate");
			var changeBtn=document.getElementById("changeBtn");
			var dateIndex=0;
			if(getCookie("showIndex")){
				dateIndex=parseInt(getCookie("showIndex"));
				changeDate(dateIndex);
				dateIndex++;
			}else{
				changeDate(dateIndex);
			}
			function btnD(){
				if(dateIndex>2){
					dateIndex=0;
				}
				changeDate(dateIndex);
				dateIndex++;
			}
			function changeDate(ind){
				var nowDate=new Date();
				var nowMonth=nowDate.getMonth()+1;
				var nowDay=nowDate.getDate();
				var nowWeek=nowDate.getDay();
				if(ind==0){
					showDate.innerHTML="当前"+nowMonth+"月";
					saveCookie("showIndex",ind,5);
				}else if(ind==1){
					showDate.innerHTML="当前"+nowDay+"日";
					saveCookie("showIndex",ind,5);
				}else if(ind==2){
					showDate.innerHTML="当前周"+nowWeek;
					saveCookie("showIndex",ind,5);
				}
			}
			
		</script>
		
	</body>
</html>
